


       .border i{
            position: absolute;
        }
        .border .hor{
            height: 2px;
            transition: width .3s;
            width: 0%;
        }
        .border .ver{
            width: 2px;
            transition: height .3s;
            height: 0%;
        }

        header .top .menuBtn *{
            background: #fff;
        }
        header .top .menuBtn.cb *{
            background: #000;
        }
       
        
        main .btns p{
            width: 42px;
            height: 42px;
            border: 1px solid #000;
            position: relative;
            z-index: 2;
        }    
        main .btns p.unclickable{
            border-color: #7c7b7d;
            cursor: default;
        }
        main .btns p img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        main .btns p img:nth-child(2){
            display: none;
        }
        main .btns.blk p img{
            display: none;
        }
        main .btns.blk p img:nth-child(2){
            display: block;
        }
        main .btns p:after{
            content: '';
            width: 0%;
            height: 100%;
            top: 0px;
            position: absolute;
            z-index: -1;
            background: rgba(0,0,0,.15);
            transition: width .45s cubic-bezier(.4,0,.2,1) 75ms;
        }
        main .btns .prev:after{
            right: 0px;
        }
        main .btns .next:after{
            left: 0px;
        }
        main .btns p:hover:after{
            width: 100%;
            transition-delay: 0s;
        }
        main .btns p.unclickable:hover:after{
            width: 0%;
        }
        main .btns .next{
            margin-left: -1px;
        }
       
       main .facEnvrmt .arrow{
           bottom: 75px;
           left: 16.66667%;
           transition: left .6s;
       }
       .mobileDevice main .facEnvrmt .arrow{
            display: none;
        }
       main section{
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        main section>.bg{
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            display: none;
        }
       main .pageHead .content{
            position: relative;
            height: 100%;
            z-index: 2;
        }
        main .pageHead .content{
            color: #fff;
        }
        main .pageHead .content::after{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #6c98bd;
            opacity: .5;
            z-index: 2;
        }
        main .pageHead .content .txt{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        main .pageHead .content>*{
            z-index: 3;
        }
        main .pageHead .content .txt{
            left: 16.66667%;
            width: 33.33333%;
            counter-reset: subsection;
        }
        main .pageHead .content .txt>img{
            display: inline-block;
            vertical-align: top;
        }
        main .pageHead .content .imgSwitch{
            position: absolute;
            z-index: 1;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        main .pageHead .content .imgSwitch img{
            opacity: 0;
            transition: opacity .5s .3s;
        }
        main .pageHead .content .imgSwitch img.active{
            opacity: 1;
            z-index: 2;
            transition-delay: 0s;
        }
        main .pageHead .btns{
            bottom: 75px;
            left: 16.66667%;
            position: absolute;
        }
        main .pageHead .btns p{
            border-color: #fff;
        }
        main .pageHead .btns .unclickable{
            border-color: hsla(0,0%,100%,.4);
        }


        main .about .content{
            left: 16.66667%;
            right: 0px;
            top: 0px;
            bottom: 0px;
            padding: 12vh 0px;
            position: absolute;
            margin: auto;
        }
        main .about .content .txt{
            width: 45%;
            padding-top: 80px;
            padding-right: 70px;
        }
        main .about .content .txt .t{
            margin-top: 50px;
        }
        main .about .content .txt .t p{
            font-size: 20px;
            line-height: 1.6;
        }
        main .about .content .pic{
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        main .about .content .pic img{
            position: absolute;
            top: 0px;
            right: 0px;
            height: 100%;
            width: auto;
        }

        main .facEnvrmt{
            overflow: hidden;
        }
        main .facEnvrmt .ttl{
            top: 25%;
            left: 16.66667%;
            z-index: 2;
        }
        main .facEnvrmt>*{
            position: absolute;
        }
        main .facEnvrmt .ttl{
            color: #fff;
            counter-reset: subsection;
        }
        main .facEnvrmt .imgSwitch{
            width: 100%;
            height: calc(100% - 225px);
            top: 0px;
            left: 0px;
            white-space: nowrap;
            transition: transform 1s;
        }
        main .facEnvrmt .imgSwitch::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background: #000;
            opacity: .1;
            z-index: 2;
            white-space: nowrap;
        }
        main .facEnvrmt .imgSwitch .pic{
            width: 100%;
            height: 100%;
            flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            transition: transform 1s;
            transform: translateY(-100%);
        }
        main .facEnvrmt .imgSwitch .pic.active{
            transform: translateY(0px);
            transition-duration: 0s;
        }
        main .facEnvrmt .parts{
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 48.14%;
            z-index: 2;
        }
        main .facEnvrmt .parts .box{
            width: calc(50% / 3);
            overflow: hidden;
            box-sizing: content-box;
            align-items: flex-end;
            position: relative;
            transition: padding .5s,transform .3s;
        }
        main .facEnvrmt .parts.frozen .box.active{
            padding-left: calc(100% / 3);
            transition-delay: .5s;
        }
        main .facEnvrmt .parts .box .sTtl{
            width: 100%;
            height: 225px;
            background: #f8f7fa;
        }
        main .facEnvrmt .parts .box .sTtl::after{
            content: '';
            position: absolute;
            width: calc((100vw - 17px) / 6);
            height: 0%;
            background: #6c98bd;
            right: 0px;
            bottom: 0px;
            transition: height .5s .5s;
        }
        /*.mobileDevice main .facEnvrmt .parts .box .sTtl::after{
            width: calc(100vw / 6);
        }*/
        main .facEnvrmt .parts.frozen .box.active .sTtl::after{
            height: 100%;
            transition-delay: 0s;
        }
        main .facEnvrmt .parts .box .sTtl p{
            height: 150px;
            position: relative;
            padding-left: 17%;
            z-index: 2;
            cursor: pointer;
        }
        main .facEnvrmt .parts .box .sTtl p span{
            font-size: 24px;
            line-height: 24px;
            color: #666;
            transition: color .3s .5s;
        }
        main .facEnvrmt .parts.frozen .box.active .sTtl p span{
            color: #fff;
            transition-delay: 0s;
        }
        main .facEnvrmt .parts .box .sTtl p span::before{
            counter-increment: subsection;
            content: "0" counter(subsection);
            font-size: 40px;
            display: inline-block;
            height: 28px;
            vertical-align: bottom;
            margin-right: 10px;
        }
        main .facEnvrmt .parts .box .sTtl p i{
            background: #6c98bd;
        }
        main .facEnvrmt .parts .box .sTtl p .tp,
        main .facEnvrmt .parts .box .sTtl p .lft{
            top: 0px;
            left: 0px;
        }
        main .facEnvrmt .parts .box .sTtl p .btm,
        main .facEnvrmt .parts .box .sTtl p .rht{
            bottom: 0px;
            right: 0px;
        }
        main .facEnvrmt .parts .box .sTtl p .hor{
            height: 2px;
        }
        main .facEnvrmt .parts .box .sTtl p .ver{
            width: 2px;
        }
        main .facEnvrmt .parts .box .sTtl p:hover .hor{
            width: 120px;
        }
        main .facEnvrmt .parts .box .sTtl p:hover .ver{
            height: 100px;
        }
        main .facEnvrmt .parts .box .inner{
            right: calc((100vw - 17px) / 6);
            width: calc((100vw - 17px) / 3);
            height: 100%;
            position: absolute;
            background: #f8f7fa;
        }
        /*.mobileDevice main .facEnvrmt .parts .box .inner{
            right: calc(100vw / 6);
            width: calc(100vw / 3);
        }*/
        main .facEnvrmt .parts .box .inner p{
            font-size: 24px;
            color: #333;
            position: absolute;
            left: calc(50% - 70px);
            right: 70px;
            top: calc(50% - 75px / 2);
            height: auto;
            transform: translateY(-50%);
            margin: auto;
        }
        main .facEnvrmt .arrow{
            transform: translateX(-70px);
            z-index: 2;
        }

        main .history>*{
            position: absolute;
        }
        main .history .content{
            position: absolute;
            top: 16%;
            left: 16.66667%;
            right: 40px;
            bottom: 21%;
            margin: auto;
            flex-direction: column;
        }
        main .history .content .swiper{
            padding-top: 60px;
            padding-left: calc((100vw - 17px) * .1666667 - 25px);
            flex: 1;
            justify-content: space-between;
            position: relative;
        }
        main .history .content .swiper>.year{
            font-size: 48px;
            position: absolute;
            top: 125px;
            left: 0px;
        }
        main .history .content .swiper .hstrySwiper{
            height: 100%;
        }
        main .history .content .swiper .swiper-slide{
            border: 1px solid #adacaf;
            padding: 0px 25px;
            padding-top: 65px;
            width: 300px;
        }
        main .history .content .swiper .swiper-slide .month{
            font-size: 30px;
            margin-bottom: 65px;
        }
        main .history .content .swiper .swiper-slide .t{
            font-size: 20px;
        }
        main .history .content .swiper-slide i{
            background: #000;
        }
        main .history .content .swiper-slide .tp,
        main .history .content .swiper-slide .lft{
            top: -1px;
            left: -1px;
        }
        main .history .content .swiper-slide .btm,
        main .history .content .swiper-slide .rht{
            bottom: -1px;
            right: -1px;
        }
        main .history .content .swiper-slide .hor{
            height: 2px;
        }
        main .history .content .swiper-slide .ver{
            width: 2px;
        }
        main .history .content .swiper-slide:hover .hor{
            width: 155px;
        }
        main .history .content .swiper-slide:hover .ver{
            height: 155px;
        }
        main .history .content .btns{
            position: absolute;
            left: 0px;
            bottom: 0px !important;
        }

        main .history .content .choose{
            position: absolute;
            left: 50%;
            z-index: 2;
            transform: translateX(-50%);
            top: 100%;
            margin-top: calc(21vh - 75px - 6px);
        }
        main .history .content .choose .op{
            text-align: center;
            margin: 0px 10px;
            cursor: pointer;
        }
        main .history .content .choose .op .circle{
            width: 11px;
            height: 11px;
            position: relative;
            margin: 0 auto;
        }
        main .history .content .choose .op .circle:before,
        main .history .content .choose .op .circle:after{
            content: '';
            position: absolute;
            border: 1px solid #000;
            border-radius: 50%;
            margin: 0 auto;
            transition: opacity .3s;
        }
        main .history .content .choose .op .circle::before{
            width: 9px;
            height: 9px;
            top: 0px;
            left: 0px;
            opacity: 0;
        }
        main .history .content .choose .op .circle::after{
            width: 3px;
            height: 3px;
            top: 3px;
            left: 3px;
            opacity: .4;
        }
        main .history .content .choose .op.active .circle:before,
        main .history .content .choose .op:hover .circle::after,
        main .history .content .choose .op.active .circle::after{
            opacity: 1;
        }
        main .history .content .choose .op .order{
            line-height: 14px;
            height: 14px;
            margin-top: 5px;
            font-size: 13px;
        }

        @media(max-width:1600px){
            main .about .content .txt{
                width: 55%;
            }
            main .about .content .txt .t{
                margin-top: 35px;
            }
            main .about .content .txt .t p{
                font-size: 18px;
                margin-bottom: 15px;
            }


            main .history .content .swiper>.year{
                font-size: 36px;
            }
        }
        @media(max-width:1500px){
            main .facEnvrmt .parts .box .sTtl p{
                padding-left: 10%;
            }
            main .facEnvrmt .parts .box .sTtl p span{
                font-size: 22px;
                line-height: 22px;
            }
            main .facEnvrmt .parts .box .sTtl p span:before{
                font-size: 36px;
                height: 26px;
            }
            main .facEnvrmt .parts .box .inner p{
                font-size: 22px;
            }

        }
        @media(max-width:1350px){
            main .about .content{
                padding: 8vh 0px;
                flex-direction: column;
            }
            main .about .content .txt{
                width: 100%;
                margin-bottom: 30px;
                padding-top: 15px;
                padding-right: 16.66667vw;
            }
            main .about .content .txt .t p{
                font-size: 18px;
                margin-bottom: 15px;
            }
            main .about .content .pic{
                width: 100%;
            }
        }
        @media(max-width:1200px){
            main .pageHead .content .txt{
                width: 66.66667%;
            }
            main .pageHead .content .txt>img{
                height: 115px;
                width: auto;
            }

            main .about .content{
                padding-top: 120px;
            }
            main .about .content .txt .t p{
                font-size: 16px;
            }

            main .facEnvrmt .parts .box .sTtl p{
                padding-left: 15px;
            }
            main .facEnvrmt .parts .box .sTtl p span{
                font-size: 20px;
                line-height: 20px;
            }
            main .facEnvrmt .parts .box .sTtl p span:before{
                font-size: 32px;
                height: 24px;
            }
            main .facEnvrmt .parts .box .inner p{
                font-size: 20px;
            }
            main .facEnvrmt .parts .box .sTtl p:hover .hor{
                width: 90px;
            }
            main .facEnvrmt .parts .box .sTtl p:hover .ver{
                height: 70px;
            }

            main .history .content .swiper>.year{
                font-size: 32px;
            }
            main .history .content .swiper{
                padding-left: 160px;
                padding-top: 100px;
            }
            main .history .content .swiper .swiper-slide{
                width: 240px;
                padding: 0px 20px;
                padding-top: 40px;
            }
            main .history .content .swiper .swiper-slide .month{
                font-size: 24px;
                margin-bottom: 35px;
            }
            main .history .content .swiper .swiper-slide .t{
                font-size: 18px;
            }
        }

        @media(max-width:1024px){
            main .pageHead .content .txt>img{
                height: 100px;
            }
            main .about .content{
                padding-top: 100px;
            }
            main .about .content .txt{
                padding-right: 14px;
            }
            main .about .content .txt .t{
                margin-top: 20px;
            }
            main .about .content .txt .t p{
                font-size: 14px;
            }

            main .facEnvrmt .parts .box .sTtl p span{
                font-size: 14px;
                line-height: 14px;
            }
            main .facEnvrmt .parts .box .sTtl p span:before{
                font-size: 28px;
                height: 20px;
            }
            main .facEnvrmt .parts .box .inner p{
                font-size: 16px;
            }
            main .facEnvrmt .parts .box .sTtl p:hover .hor{
                width: 80px;
            }
            main .facEnvrmt .parts .box .sTtl p:hover .ver{
                height: 60px;
            }
        }

        @media(max-width:860px){
            main .facEnvrmt .parts .box .sTtl p span::before{
                display: block;
                margin-right: 0px;
            }
            main .facEnvrmt .parts .box .sTtl p span::before{
                margin-bottom: 10px;
            }
        }

        @media(max-width:767px){
            .screenLines .hor,
            main .facEnvrmt .arrow,
            main .btns{
                bottom: 42px !important;
            }

            main .pageHead .content{
                height: 100vh;
            }
            main .pageHead .content .txt>img{
                height: auto;
                max-width: 240px;
                width: 100%;
            }

            main .about{
                min-height: 100vh;
                height: initial;
            }
            main .about .content{
                position: initial;
                width: calc(100% - 16.66667%);
                margin-left: 16.66667%;
            }
            main .about .content .txt{
                margin-bottom: 15px;
            }
            main .about .content .txt .t p{
                font-size: 12px;
            }
            main .about .content .pic{
                flex: initial;
                height: 300px;
            }

            main .facEnvrmt .imgSwitch{
                height: calc(100% - 172px);
            }
            main .facEnvrmt .parts{
                height: 320px;
                align-items: flex-end;
            }
            main .facEnvrmt .parts .box{
                width: 25%;
                height: 172px;
                background: #f8f7fa;
                overflow: initial;
            }
            main .facEnvrmt .parts.frozen .box.active{
                padding-left: 0px;
                padding-bottom: 130px;
            }
            main .facEnvrmt .parts .box .sTtl{
                height: 172px;
            }
            main .facEnvrmt .parts .box .sTtl:after{
                width: 200%;
                left: 0px;
                right: auto;
            }
            main .facEnvrmt .parts .box:last-child.active{
                transform: translateX(-100%);
            }
            main .facEnvrmt .parts .box .sTtl p{
                height: 130px;
                display: block;
                padding-top: 20px;
            }
            main .facEnvrmt .parts .box .sTtl i{
                display: none;
            }
            main .facEnvrmt .parts .box .sTtl p span:before{
                font-size: 24px;
                height: initial;
            }
            main .facEnvrmt .parts .box .inner{
                left: 0px;
                right: auto;
                top: auto;
                bottom: 155px;
                width: 200%;
                height: auto;
                opacity: 0;
                transition: opacity .3s;
                background: transparent;
            }
            main .facEnvrmt .parts .box.active .sTtl p{
                width: 200%;
            }
            main .facEnvrmt .parts.frozen .box.active .inner{
                opacity: 1;
                transition-delay: .8s;
            }
            main .facEnvrmt .parts .box .inner p{
                position: initial;
                font-size: 12px;
                line-height: 1.5;
                padding: 0px 15px;
                color: #fff;
            }
            main .facEnvrmt .arrow{
                transform: translateX(15px);
            }

            main .history .content{
                bottom: 12%;
                right: 14px;
            }
            main .history .content .swiper{
                padding: 70px 0px;
            }
            main .history .content .swiper>.year{
                font-size: 24px;
                top: 25px;
            }
            main .history .content .swiper .hstrySwiper{
                max-height: 35vh;
            }
            .mobileDevice main .history .content .swiper .hstrySwiper{
                height: 100%;
            }
            main .history .content .swiper .swiper-slide{
                width: 200px;
                padding: 15px;
            }
            main .history .content .swiper .swiper-slide .month{
                font-size: 16px;
                margin-bottom: 20px;
            }
            main .history .content .swiper .swiper-slide .t{
                font-size: 12px;
            }
            main .history .content .choose{
                display: none;
            }
        }